<template>
  <div>
      <h2 v-text="name" ref="title" ></h2>
      <button ref="btn" @click="showDom">点我展示元素</button>
      <SchoolDemo ref="sch"></SchoolDemo>

  </div>
</template>

<script>

import School from "./components/School.vue"

export default {
    name:"App",
    components:{SchoolDemo:School},
    methods: {
        showDom(){
            /*
            之前说过，在组件中this表示的是vc
            也就是VueComponents实例对象

            如果你想要在vue中获得dom元素，有一个优雅的方式
            是通过ref属性来获得

            不过，如果你在组件中使用ref，例如这个School
            那么获得的就是这个组件的实例对象，也就是这个组件的
            vc对象

            不过，要是使用id来标识这个组件，也就是
             <SchoolDemo id="sch"></SchoolDemo>
            那么你使用document.getXXX来获得的时候
            得到的就只是一个组件的html结构而已。
            */

            console.log(this.$refs.title);
            console.log(this.$refs.btn);
            console.log(this.$refs.sch);
        
        }
    },
}
</script>

<style>

</style>